<template>
    <div class="box-wrapper">
        <div class="search-wrap">
            <div class="item">
                <el-input @input="searchQuery" v-model="useDepartment" placeholder="所属单位"></el-input>
                <div v-show="isKeyword" class="correlation">
                    <div class="item" v-for="(item,index) in keywordList" :key="index" @click="keyChange(item)">{{ item.companyName }}</div>
                </div>
            </div>
            <div class="item">
                <el-input v-model.trim="userName" placeholder="用户名称"></el-input>
            </div>
            <div class="item">
                <el-input v-model.trim="staffCode" placeholder="用户编号"></el-input>
            </div>
            <div class="item">
                <el-select v-model="state" placeholder="请选择状态">
                    <el-option label="未知" value="-1"></el-option>
                    <el-option label="退休" value="2"></el-option>
                    <el-option label="离校" value="4"></el-option>
                    <el-option label="在职" value="9"></el-option>
                </el-select>
            </div>
            <div class="item">
                <el-input v-model.trim="userCode" placeholder="账号"></el-input>
            </div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item t-rig">
                <el-button class="btn bg-blue" @click="queryClick">查询</el-button>
                <el-button class="btn" @click="resetClick">重置</el-button>
            </div>
        </div>
        <el-table v-loading="loading" ref="multipleTable" :header-cell-style="headerStyle" :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="companyName" label="所属单位">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称">
            </el-table-column>
            <el-table-column prop="userName" label="用户名称">
            </el-table-column>
            <el-table-column prop="jAccountCode" label="用户账号">
            </el-table-column>
            <el-table-column prop="stateValue" label="状态">
            </el-table-column>
            <!-- <el-table-column prop="userType" label="用户名称">
                <template slot-scope="scope">
                    {{ getStatus(scope.row.userType) }}
                </template>
            </el-table-column> -->
            <el-table-column prop="oprate" label="操作">
                <template slot-scope="scope">
                    <!-- <el-button @click="handleClick(scope.row,'modify')" type="text" size="small">修改</el-button> -->
                    <el-button @click="getPermissions(scope.row)" type="text" size="small">权限分配</el-button>
                    <!-- <el-button @click="handleClick(scope.row,'detail')" type="text" size="small">查看</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="page" v-if="total> 0 && tableData.length > 0">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[10,20,30,40]"
                :page-size="pageSize"
                layout="prev,pager,next,sizes,total"
                :total="total">
            </el-pagination>
        </div>
        <userRoleChange :permissDialog="permissDialog" :staffCodeId="staffCodeId" @dialogSaveClick="dialogSaveClick" @closeClick="closeClick"/>
    </div>
</template>
<script>
import {request} from "@/assets/js/utils/request"
import mixin from '@/assets/js/mixin'
import userRoleChange from './userRoleChange'
export default{
    mixins: [mixin],
    components: {
        userRoleChange
    },
    data() {
        return {
            loading: false,
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            isDialog: false,
            headerStyle: {
                background: '#f2f2f2',
                color: '#000',
            },
            dataType: '',
            dataInfo: {},
            dataTitle: '',
            permissDialog: false,
            roleList: [],
            staffCodeId: '',
            useDepartment: '',
            staffCode: '',
            userName: '',
            userCode: '',
            state: '',
            jAccountCode: '',
            keywordList: [],
            isKeyword: false
        }
    },
    created() {
        this.initData()
    },
    mounted() {
        // 在mounted钩子中添加事件监听
        document.addEventListener('click', this.inputBlur);
    },
    beforeDestroy() {
        // 在组件销毁前移除事件监听
        document.removeEventListener('click', this.inputBlur);
    },
    methods: {
        inputBlur() {
            const isOutside = !this.$el.contains(event.target);
            if (isOutside) {
                this.isKeyword = false
            }
        },
        keyChange(params) {
            this.useDepartment = params.companyName
            this.isKeyword = false
        },
        searchQuery() {
            request({
                url: '/api/getUseDepartment.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    useDepartment: this.useDepartment
                }
            }).then(res => {
                if(res.code == 200) {
                    this.isKeyword = true
                    this.keywordList = res.data || []
                }
            })
        },
        closeClick() {
            this.permissDialog = false
        },
        dialogSaveClick() {
            this.permissDialog = false
            this.initData()
        },
        getPermissions(params) {
            this.permissDialog = true
            this.staffCodeId = params.userId
        },
        handleClick(params,type) {
            console.log(params,type)
            this.isDialog = true
            if(type == 'modify') {
                this.dataTitle = '角色修改'
            }
            if(type == 'detail') {
                this.dataTitle = '角色详情'
            }
            this.dataType = type
            this.dataInfo = params
        },
        queryClick() {
            this.isKeyword = false
            this.initData()
        },
        resetClick() {
            this.useDepartment = ''
            this.staffCode = ''
            this.userName = ''
            this.userCode = ''
            this.state = ''
            this.jAccountCode = ''
            this.initData()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.initData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.initData()
        },
        initData() {
            request({
                url: '/manager/userInfo/userToRoleInfoQuery.jsp',
                method: 'post',
                data: {
                    useDepartment: this.useDepartment,
                    staffCode: this.staffCode,
                    userName: this.userName,
                    userCode: this.userCode,
                    staffCode: this.staffCode,
                    state: this.state,
                    page: this.currentPage,
                    limit: this.pageSize
                }
            }).then(res => {
                if(res.code == 200) {
                    this.tableData = res.data || []
                    this.total = res.count
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.box-wrapper{
    background: #fff;
    .title-name{
        line-height: 30px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        span{
            color: #409EFF;
            display: inline-block;
            border-bottom: 2px solid #409EFF;
        }
    }
}
/deep/.search-wrap{
    margin: 20px 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    background: #b1cbff;
    .item{
        width: 25%;
        padding: 5px;
        position: relative;
        .btn{
            padding: 0;
            width: 80px;
            height: 32px;
            border: none;
            // background: #016aed;
        }
        .bg-blue{
            color: #ffffff;
            background: #016aed;
        }
        .el-select{
            width: 100%;
        }
        .el-input{
            .el-input__inner{
                height: 32px;
            }
        }
        .correlation{
            position: absolute;
            width: 320px;
            max-height: 280px;
            overflow-y: auto;
            background: #fff;
            z-index: 100;
            border: 1px solid #d5d5d5;
            box-shadow: 0 0 3px #ddd;
            .item{
                width: 100%;
                padding: 10px;
                cursor: pointer;
            }
        }
    }
}
.query-box{
    margin: 20px 0;
    .btn{
        padding: 0;
        width: 100px;
        height: 32px;
        background: #016aed;
    }
}
.tabHeader{
    background: #f2f2f2;
}
.page{
    padding: 20px 0;
    border-top: 1px solid #d5d5d5;
    text-align: right;
}
</style>